<template>
  <el-checkbox :value="value" :checked="checked">{{ text }}</el-checkbox>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Boolean],
      default: ''
    },
    checked: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.el-checkbox {
  display: flex;
  align-items: center;

  .el-checkbox__input {
    height: 20px;

    &.is-checked + .el-checkbox__label {
      color: #51c3ff;
    }

    &.is-checked .el-checkbox__inner {
      background-color: #51c3ff !important;
      border-color: #51c3ff;
    }

    .el-checkbox__inner {
      width: 20px;
      height: 20px;
    }

    .el-checkbox__inner::after {
      left: 40%;
      top: 20%;
    }
  }

  .el-checkbox__label {
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    word-break: break-all;
    white-space: break-spaces;
    color: #333;
  }
}
</style>
